import {useEffect, useRef} from "react";
import * as echarts from "echarts";

const BarChart = ()=>{
    // 1. 获取dom元素
    // 2. 初始化echarts实例
    // 3. 配置项
    // 4. 渲染
    const refChart = useRef(null);
    useEffect(()=>{
        // let chartDom = document.getElementById('main');
        let chartDom=refChart.current
        let myChart = echarts.init(chartDom);
        let option;

        option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar'
                }
            ]
        };

        option && myChart.setOption(option);
    },[])
    return <div ref={refChart} style={{width:'500',height:'600px'}}></div>
}

export default BarChart